<!DOCTYPE html>
<html>
<head>

    <title>声撩在线注册</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="static/reg.css">
    <link rel="stylesheet" type="text/css" href="static/aui.css">
    <link rel="stylesheet" type="text/css" href="static/captcha-code.css">
</head>
<body>


<div class="div_main">

    <div class="reg_top"><img src="static/images/reg_top_sl.png"></div>

    <div class="reg_main">
        <div class="label-input">
            <label>手机号码</label>
            <input style="-webkit-user-select:text !important" id="registerPhone" placeholder="请输入手机号码" max="11">
        </div>
        <div class="label-input">
            <label>验证码</label>

            <div id="second" class="get_code">获取验证码</div>
            <input style="-webkit-user-select:text !important" id="sms_code" placeholder="请输入验证码">
        </div>
        <div class="label-input">
            <label>密码</label>
            <input type="password" id="registerPassword" class="" placeholder="请输入登录密码">
        </div>

        <div id="registerInput" class="reg_btn btn_disabled">
            <span style="color: white">注册</span>
        </div>
    </div>

    <div class="captcha-code hide">
        <div class="captcha-close">X</div>
        <div class="desc">输入图中字符，帮助我们完成安全测试</div>
        <div class="image">
            <img src="" alt="">
        </div>
        <div class="change">看不清？换一张</div>
        <div class="weui-input captcha-input"><input type="text" placeholder="请输入校验码"></div>
        <div class="captcha-button">确定</div>
    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="static/captcha-code.js"></script>
<script
    type="text/javascript"> document.write('<script type="text/javascript" src="static/pub.js?time=' + new Date().getTime() + '"><' + '/' + 'script>');</script>

<script type="text/javascript">
    $('.captcha-code').css({'display': 'none'})
    $("#second").click(function () {
        sendyzm($("#second"));

    });

    //用ajax提交到后台的发送短信接口
    function sendyzm(obj) {
        var phone = $("#registerPhone").val();
        var result = isPhoneNum();
        if (result) {
            $.ajax({
                url: shareUrl + "/invite/sms_code",
                data: {phone: phone, sms_type: 1},
                dataType: "json",
                type: "post",
                async: false,
                cache: false,
                success: function (res) {
                    console.log(res)
                    if (res.code === 9) {
                        // 获取图形验证码
                        captchaCode();
                        return false;
                    }
                    if (res.code == 0) {
                        alert("验证码发送成功");
                    } else {
                        alert("验证码发送失败");
                    }
                }
            })
            setTime(obj);//开始倒计时
        }
    }

    //60s倒计时实现逻辑
    var countdown = 60;

    function setTime(obj) {
        if (countdown == 0) {
            obj.prop('disabled', false);
            obj.text("点击获取验证码");
            countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
            return;
        } else {
            obj.prop('disabled', true);
            obj.text("(" + countdown + "s)后重新发送");
            countdown--;
        }
        setTimeout(function () {
            setTime(obj)
        }, 1000) //每1000毫秒执行一次
    }


    //校验手机号是否合法
    function isPhoneNum() {
        return true;
    }


    $("#registerInput").click(function () {
        var user_id = getUrlParam('user_id');
        var phone = $("#registerPhone").val();
        var code = $("#sms_code").val();
        var password = $("#registerPassword").val();
        var result = isPhoneNum();
        if (result) {
            $.ajax({
                url: shareUrl + "/invite/inviteRegister",//要请求的服务器url
                //这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取
                //data:{method:"ajaxTest",val:value},
                data: {
                    phone: phone,
                    code: code,
                    password: password,
                    user_id: user_id,
                },
                async: true,   //是否为异步请求
                cache: false,  //是否缓存结果
                type: "POST", //请求方式为POST
                dataType: "json",   //服务器返回的数据是什么类型
                success: function (result) {  //这个方法会在服务器执行成功是被调用 ，参数result就是服务器返回的值(现在是json类型)
                    // TODO 校验图形验证码
                    if (result.code === 9) {
                        // 获取图形验证码
                        captchaCode();
                        return false;
                    }
                    if (result.code == 0) {
                        window.location.replace(shareUrl + "/wx_html/login.html");
                    } else {
                        alert(result.msg);
                    }
                }
            });
        }
    });


    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }
</script>

</body>
</html>
